<template>
<div>
    <el-upload
    :action="uploadUrl"
    ref="upload"
    list-type="picture-card"
    :auto-upload="true"
    :on-success="successUpload"
    :file-list="fileList"
    multiple
    >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
        <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
            <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
            >
            <i class="el-icon-zoom-in"></i>
            </span>
            <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
            >
            <i class="el-icon-download"></i>
            </span>
            <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
            >
            <i class="el-icon-delete"></i>
            </span>
        </span>
        </div>
    </el-upload> 
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>  
</div>
 
</template>

<script>
import {uploadUrl,host} from '@/api/base'
export default {
    props:{
      fileList:{
        type:Array,
        default:function(){
          return [];
        }
      }
    },
    data() {
      return {
        uploadUrl,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false
      };
    },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      submitUpload() {
        console.log(this.uploadUrl);
        this.$refs.upload.submit();
      },
      successUpload(response){
        console.log(response);
        let imgUrl=host+response.url.slice(7);
        // console.log(imgUrl);
        this.$emit('getUploadImgUrl',imgUrl);
        
      },
      clear(){
        //清除图片列表
        this.$refs.upload.clearFiles();
      }
    }
  }
</script>

<style lang="less" scoped>
    .uploadbtn{
        margin-top: 15px;
    }
</style>